<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.cookie.js" type="text/javascript" charset="UTF-8"></script>

		<style type="text/css">
			* {
				margin: 0;
				box-sizing: content-box;
			}
			
			#sgp_main {
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
			
			#sgp_div {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
				width: 450px;
				height: 450px;
				border-radius: 50%;
				background-image: linear-gradient(to right, #F5FFFA,#7FFFD4);
			}
			
			#Outerring {
				display: flex;
				position: fixed;
				left: 50%;
				top: 50%;
				width: 680px;
				height: 680px;
				transform: translateX(-50%) translateY(-50%);
				border-radius: 50%;
				position: absolute;
				background-image: linear-gradient(to right, white, 	#9370DB);
				z-index: -99;
			}
			
			#Outerring:after {
				border-radius: 50%;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
				content: "";
				width: 550px;
				height: 550px;
				background: white;
				position: absolute;
				z-index: -98;
			}
			
			#Outerring_out {
				position: absolute;
				left: 0%;
				top: 0%;
				width: 50%;
				height: 50%;
				background: white;
				border-radius: 100% 0% 0% 0%;
			}
			
			#Outerring_out_ring {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
				width: 780px;
				height: 780px;
				background: transparent;
				z-index: -100;
				border-radius: 50%;
				border: 1px solid rgb(0, 0, 0, 0.5);
			}
			
			#sgp_psd {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
			
			#sgp_psd div {
				text-align: center;
				display: flex;
				flex-direction: row;
				padding: 10px;
			}
			
			#sgp_psd div span {
				width: 200px;
				font-family: "楷体";
				font-size: 2.4em;
				color: lightslategray;
			}
			
			#sgp_psd div input {
				font-family: "楷体";
				font-size: larger;
				background: transparent;
				outline: none;
				height: 40px;
				width: 180px;
				border-left: 1px solid rgb(0, 0, 0, 0.6);
				border-right: 1px solid rgb(0, 0, 0, 0.6);
				border-top: 1px solid rgb(0, 0, 0, 0.6);
				border-bottom: 1px solid rgb(0, 0, 0, 0.6);
			}
			
			#cgpwd_but {
				font-family: "楷体";
				font-size: 2.0em;
				position: absolute;
				bottom: -70%;
				left: -40%;
				transform: translateX(-50%);
				border-radius: 100px;
				height: 120px;
				width: 120px;
				background-color: transparent;
			}
			
			#cgpwd_rebut {
				font-family: "楷体";
				font-size: 1.4em;
				position: absolute;
				bottom: -180%;
				left: 125%;
				transform: translateX(-50%);
				border: 1px solid black;
				border-radius: 100px;
				height: 120px;
				width: 120px;
				background-color: transparent;
				z-index: 10;
			}
			
			
			
		</style>
	</head>

	<body>
		<div id="sgp_main">
			<div id="sgp_div">
				<div id="sgp_psd">

					<div class="cgpwd_div_span">
						<span>
				旧密码
			</span>
						<input type="text" id="cgpwd_one_passsword" value="" />

					</div>
					<div class="cgpwd_div">
						<span class="cgpwd_div_span">
				新密码
			</span>
						<input type="text" id="cgpwd_tow_password" value="" />
					</div>

					<input type="button" id="cgpwd_but" value="确认修改" / disabled="disabled">
					<input type="button" id="cgpwd_rebut" value="返回上一页" />
				</div>
			</div>
			<div id="Outerring">
				<div id="Outerring_out">
				</div>
			</div>
			<div id="Outerring_out_ring">
			</div>
		</div>
		<script type="text/javascript">
			$("#cgpwd_rebut").click(function(){
				window.history.go(-1)
			})
			$("#cgpwd_one_passsword,#cgpwd_tow_password").keyup(function() {
				var pwd_dis_one;
				var pwd_dis_tow;
				if($("#cgpwd_one_passsword").val() == "") {
					pwd_dis_one = 0
				} else {
					pwd_dis_one = 1
				}
				if($("#cgpwd_tow_password").val() == "") {
					pwd_dis_tow = 0
				} else {
					pwd_dis_tow = 1

				}
				if(pwd_dis_one && pwd_dis_tow) {
					$('#cgpwd_but').attr("disabled", false);
				} else {
					$('#cgpwd_but').attr("disabled", true);
				}
			})

			$("#cgpwd_but").click(function() {
				if($.cookie("uId") != "") {
					cgp()
				} else {
					alert("用户暂未登录")
				}
			})

			function cgp() {
				$.post(
					"http://qlapi.sylu.edu.cn/mock/146/api/updatepassword", {
						password: $("#cgpwd_one_password").val(),
						newpassword: $("#cgpwd_tow_password").val(),
					},
					function(res) {
						console.log(res)
						if(res.msg == "修改成功") {
							$.recookie('admin', res.admin, {
								path: '/'
							}); //权限
							$.cookie('uId', res.uId, {
								path: '/'
							}); //id

							$.removeCookie('admin', {
								path: '/'
							});
							$.removeCookie('uId', {
								path: '/'
							});
							alert("修改成功")
							window.location.href = "../index.html"
						} else {
							alert("网路似乎出现问题")
						}
					})
			}
		</script>
	</body>

</html>